<template>
  <view class="org-structure-page">
	  <!-- 顶部自定义导航 -->
	  <tn-nav-bar fixed alpha customBack>
	  	<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
	  		<text class='icon tn-icon-left'></text>
	  	</view>
	  </tn-nav-bar>
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <text class="empty"></text>
      <text class="title">组织架构</text>
      <view class="empty"></view> <!-- 占位保持标题居中 -->
    </view>

    <!-- 页面副标题 -->
    <view class="subtitle">吉林农业科技学院教育基金会领导机构成员</view>

    <!-- 组织架构列表 -->
    <view class="structure-list">
      <!-- 理事长 -->
      <view class="structure-item">
        <view class="item-header">
          <text class="header-number">一、</text>
          <text class="header-title">理事长</text>
        </view>
        <view class="item-content">
          <text class="member-name">沈宪文</text>
        </view>
      </view>

      <!-- 副理事长 -->
      <view class="structure-item">
        <view class="item-header">
          <text class="header-number">二、</text>
          <text class="header-title">副理事长（按照姓氏笔画）</text>
        </view>
        <view class="item-content member-grid">
          <text class="member-name" v-for="(name, index) in viceChairmen" :key="index">{{ name }}</text>
        </view>
      </view>

      <!-- 秘书长 -->
      <view class="structure-item">
        <view class="item-header">
          <text class="header-number">三、</text>
          <text class="header-title">秘书长</text>
        </view>
        <view class="item-content">
          <text class="member-name">丁喜胜</text>
        </view>
      </view>

      <!-- 理事会成员 -->
      <view class="structure-item">
        <view class="item-header">
          <text class="header-number">四、</text>
          <text class="header-title">理事会成员（按照姓氏笔画）</text>
        </view>
        <view class="item-content member-grid">
          <text class="member-name" v-for="(name, index) in councilMembers" :key="index">{{ name }}</text>
        </view>
      </view>

      <!-- 监事 -->
      <view class="structure-item">
        <view class="item-header">
          <text class="header-number">五、</text>
          <text class="header-title">监事（按照姓氏笔画）</text>
        </view>
        <view class="item-content member-grid">
          <text class="member-name" v-for="(name, index) in supervisors" :key="index">{{ name }}</text>
        </view>
      </view>

      <!-- 副秘书长 -->
      <view class="structure-item">
        <view class="item-header">
          <text class="header-number">六、</text>
          <text class="header-title">副秘书长</text>
        </view>
        <view class="item-content">
          <text class="member-name">李成</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 领导机构成员数据
      viceChairmen: ['王伟华', '刘启锋', '关中生', '孙玉忠', '宋松林', '徐健博', '薛宝君'],
      councilMembers: ['丁喜胜', '马辉', '王伟华', '王喜来', '王金山', '牛伟', '刘启锋', '关中生', '孙玉忠', '李晓成', '沈宪文', '宋松林', '陈世纪', '陈凯', '修立福', '徐建博', '薛宝君'],
      supervisors: ['王凤文', '钟大辉', '袁凤明']
    };
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({ delta: 1 });
    }
  }
};
</script>

<style scoped>
/* 基础样式 - 延续绿色系风格 */
.org-structure-page {
  min-height: 100vh;
  background-color: #f6faf7; /* 浅绿背景 */
  padding-bottom: 30rpx;
}

/* 导航栏 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #e8f3ea; /* 浅绿边框 */
}

/* 自定义导航栏返回按钮样式 */
.tn-custom-nav-bar__back {
	width: 60%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: 1000rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.5);
	color: #FFFFFF;
	font-size: 18px;
}
.icon {
		display: block;
		flex: 1;
		margin: auto;
		text-align: center;
	}

.title {
  font-size: 34rpx;
  font-weight: 600;
  color: #2d7d46; /* 深绿标题 */
}

.empty {
  width: 50rpx;
}

/* 副标题 */
.subtitle {
  font-size: 28rpx;
  color: #2d7d46; /* 深绿文字 */
  text-align: center;
  padding: 25rpx 20rpx;
  font-weight: 500;
  border-bottom: 1px solid #e8f3ea;
  background-color: #fff;
  margin-bottom: 20rpx;
}

/* 组织架构列表 */
.structure-list {
  padding: 0 20rpx;
}

/* 架构项 */
.structure-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(45, 125, 70, 0.08); /* 绿色阴影 */
}

/* 项标题 */
.item-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 15rpx;
  border-bottom: 1px solid #f0f7f1; /* 浅绿分隔线 */
}

.header-number {
  font-size: 28rpx;
  color: #36b37e; /* 主绿序号 */
  font-weight: 600;
  margin-right: 10rpx;
}

.header-title {
  font-size: 28rpx;
  color: #2d7d46; /* 深绿标题 */
  font-weight: 500;
}

/* 项内容 */
.item-content {
  padding-left: 10rpx;
}

/* 成员网格布局 */
.member-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx 25rpx;
}

/* 成员姓名 */
.member-name {
  font-size: 26rpx;
  color: #333;
  background-color: #f0f7f1; /* 浅绿背景 */
  padding: 8rpx 20rpx;
  border-radius: 30rpx;
  border: 1px solid #e8f3ea; /* 浅绿边框 */
}

/* 单个成员样式（无网格） */
.item-content:not(.member-grid) .member-name {
  background-color: transparent;
  border: none;
  padding: 0;
  font-size: 28rpx;
  color: #2d7d46;
}
</style>